<template>
  <div class="login-register-container">
    <h1>进销存管理系统</h1>
    <div class="toggle-buttons">
      <button
        :class="{ active: isLogin }"
        @click="isLogin = true"
      >
        登录
      </button>
      <button
        :class="{ active: !isLogin }"
        @click="isLogin = false"
      >
        注册
      </button>
    </div>
    <!-- 登录表单 -->
    <form v-if="isLogin" @submit.prevent="handleLogin">
      <el-input
        v-model="loginUsername"
        placeholder="用户名"
        required
        class="custom-input"
      ></el-input>
      <el-input
        v-model="loginPassword"
        type="password"
        placeholder="密码"
        required
        class="custom-input"
      ></el-input>
      <p v-if="loginError" class="error-message">用户名或密码错误，请重新输入。</p>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </form>
    <!-- 注册表单 -->
    <form v-else @submit.prevent="handleRegister">
      <el-input
        v-model="registerUsername"
        placeholder="用户名"
        required
        class="custom-input"
      ></el-input>
      <el-input
        v-model="registerPassword"
        type="password"
        placeholder="密码"
        required
        class="custom-input"
      ></el-input>
      <el-input
        v-model="confirmPassword"
        type="password"
        placeholder="确认密码"
        required
        class="custom-input"
      ></el-input>
      <p v-if="passwordMismatch" class="error-message">两次输入的密码不一致，请重新输入。</p>
      <p v-if="registerError" class="error-message">注册失败，请稍后重试。</p>
      <el-button type="primary" @click="handleRegister">注册</el-button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/userStore';
import request from '../utils/request';
import { ElMessage } from 'element-plus';

const isLogin = ref(true);
const loginUsername = ref('');
const loginPassword = ref('');
const registerUsername = ref('');
const registerPassword = ref('');
const confirmPassword = ref('');
const passwordMismatch = ref(false);
const loginError = ref(false);
const registerError = ref(false);
const router = useRouter();
const userStore = useUserStore();

const handleLogin = async () => {
    try {
        const response = await request.post('/user/login', {
            username: loginUsername.value,
            password: loginPassword.value
        });

        if (response.code === 1) { 
            loginError.value = false;
            console.log(response.data.token)
            userStore.setToken(response.data.token);
            router.push('/layout');
        } else {
            loginError.value = true;
            ElMessage.error('用户名或密码错误，请重新输入。');
        }
    } catch (error) {
        console.error('登录请求出错:', error);
        loginError.value = true;
        ElMessage.error('登录请求出错，请稍后重试。');
    }
};

const handleRegister = async () => {
    if (registerPassword.value === confirmPassword.value) {
        passwordMismatch.value = false;
        try {
            const response = await request.post('/user/register', {
                username: registerUsername.value,
                password: registerPassword.value,
                confirmPassword:confirmPassword.value
            });
            if (response.code === 1) {
                registerError.value = false;
                ElMessage.success('注册成功，请登录');
                isLogin.value = true;
            } else {
                registerError.value = true;
                ElMessage.error('注册失败，请稍后重试。');
            }
        } catch (error) {
            console.error('注册请求出错:', error);
            registerError.value = true;
            ElMessage.error('注册请求出错，请稍后重试。');
        }
    } else {
        passwordMismatch.value = true;
        ElMessage.error('两次输入的密码不一致，请重新输入。');
    }
};
</script>

<style scoped>
.login-register-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 8px; /* 统一圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: #ffffff;
  background-image: url('@/assets/background.jpg'); 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 100vh;
  position: relative;
}

.login-register-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7); 
  border-radius: 8px; /* 统一圆角 */
}

.login-register-container > * {
  position: relative;
  z-index: 1;
}

.login-register-container h1 {
  text-align: center;
  margin-bottom: 25px;
  color: #333;
  font-size: 28px;
}

.toggle-buttons {
  display: flex;
  justify-content: space-around;
  margin-bottom: 25px;
  border-bottom: 1px solid #e0e0e0;
}

.toggle-buttons button {
  flex: 1;
  padding: 12px 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  outline: none;
}

.toggle-buttons button.active {
  color: #007BFF;
  border-bottom: 2px solid #007BFF;
}

/* 美化输入框 */
::v-deep .custom-input .el-input__inner {
  height: 40px; /* 调整输入框高度 */
  border: 1px solid #dcdfe6; /* 设置边框颜色 */
  border-radius: 8px; /* 增加边框圆角 */
  padding: 0 15px; /* 调整内边距 */
  font-size: 14px; /* 设置字体大小 */
  transition: border-color 0.3s ease; /* 添加边框颜色过渡效果 */
  width: 100%; /* 让输入框宽度与容器一致 */
  box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}

::v-deep .custom-input .el-input__inner:hover {
  border-color: #409eff; /* 鼠标悬停时边框颜色 */
}

::v-deep .custom-input .el-input__inner:focus {
  border-color: #409eff; /* 输入框聚焦时边框颜色 */
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); /* 聚焦时添加阴影效果 */
}

/* 为 form 内的元素添加间距 */
.login-register-container form > * {
  margin-bottom: 15px; /* 调整元素之间的间距 */
}

.login-register-container button[type="submit"] {
  width: 100%;
  padding: 12px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 8px; /* 统一圆角 */
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.login-register-container button[type="submit"]:hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
}
</style>